<template>
	<div class="main">
		<div class="item" v-for="item in goodList" :key="item.id" @click="goDetail(item.id)">
			<img :src="item.img_url" alt="">
			<div class="info">
				<p class="title">{{ item.title }}</p>
				<p class="price">
					<span class="new">￥{{ item.sell_price }}</span>
					<span class="old">￥{{ item.market_price }}</span>
				</p>
				<p class="sell">
					<span class="hot">热卖中</span>
					<span class="remain">剩余{{ item.stock_quantity }}件</span>
				</p>
			</div>
		</div>
		<mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				pageIndex: 1,
				goodList: []
			}
		},
		created(){
			this.getGoodList()
		},
		methods: {
			getGoodList () {
				this.$http.get('http://www.liulongbin.top:3005/api/getgoods?padgeindex=' + this.pageIndex).then(result => {
					if ( result.body.status === 0 ) {
						this.goodList = this.goodList.concat(result.body.message)
						console.log(result.body.message)
					}
				})
			},
			getMore () {
				this.pageIndex ++;
				this.getGoodList()
				console.log(this.pageIndex)
			},
			goDetail (id) {
				this.$router.push({ name: 'GoodInfo', params: { id } })
			}
		}
	}
</script>

<style lang="less">
	.main {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 49%;
			padding: 7px;
			border:1px solid #ccc;
			box-shadow: 0 0 8px #ccc;
			
			img {
				width: 100%;
			}
		}

		.info {
			bottom: 0px;
			.title {
				font-size: 14px;
			}
			.new{
				font-weight: bold;
				color: red;
			}
			.old {
				text-decoration: line-through;
			}
			.sell {
				display: flex;
				justify-content: space-between;
			}
		}
	}

</style>
